<template>
  <div class="container of-y-a">
    <div class="code-wrap" v-if="userInfo.userNo">
      <div class="fs16 mb5">{{userInfo.userNo}}</div>
      <img class="bar-code" :src="barCodeUrl">
      <img class="qr-code" :src="qrCodeUrl">
    </div>

    <!--<div class="wx-pay">-->
      <!--<div class="cCCC mb10">使用微信付款码付款</div>-->
      <!--<div class="btn df-c" @click="openPay">-->
        <!--<img src="../assets/images/common/wx_support.png" alt="">-->
        <!--<span>微信支付</span>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  .container {
    height: 100vh;
    background: #FFFFFF;

    .code-wrap {
      padding-top: 60px;
      padding-bottom: 15px;
      text-align: center;
      img {
        margin-bottom: 20px;
        vertical-align: middle;
      }
      .bar-code {
        width: 300px;
        height: 100px;
      }
      .qr-code {
        width: 150px;
        height: 150px;
      }
    }
    .wx-pay {
      padding: 0 48px;
      text-align: center;
      .btn {
        padding: 13px 0;
        background: $themeColor;
        border-radius: 4px;
        font-size: 16px;
        color: #FFFFFF;
        img {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
      }
    }
  }
</style>

<script>
  import {mapGetters, mapActions} from 'vuex'

  export default {
    data() {
      return {
        qrCodeUrl: '',
        barCodeUrl: ''
      }
    },
    components: {
    },
    computed: {
      ...mapGetters(['userInfo']),
    },
    methods: {
      ...mapActions(['updateAppSetting']),
      getCode () {
        if (!this.userInfo.userNo) {
          wx.showToast({
            title: '暂无会员码',
            icon: 'none',
            duration: 1500,
          })
          return
        }

        let param = {
          code: this.userInfo.userNo,
          size: 5,    //  twoDimensionCode
          // dpi: 90,    //  barcode
        }

        wx.showLoading()
        this.$api.getUserCode(param).then(res => {
          wx.hideLoading()

          let base64 = wx.arrayBufferToBase64(res);
          this.qrCodeUrl = "data:image/png;base64," + base64
        }, err => {
          wx.hideLoading()
          err.msg && wx.showModal({
            title: '提示',
            content: '二维码获取失败！',
            showCancel: false,
            success(res) {}
          })
        })

        this.$api.getUserBarCode(param).then(res => {
          let base64 = wx.arrayBufferToBase64(res);
          this.barCodeUrl = "data:image/png;base64," + base64
        }, err => {
          err.msg && wx.showModal({
            title: '提示',
            content: '二维码获取失败！',
            showCancel: false,
            success(res) {}
          })
        })
      },
      openPay () {
        wx.showLoading()
        this.$api.getPayCodeInfo().then(data => {
          wx.hideLoading()

          wx.openOfflinePayView({
            "appId": data.appId,
            "timeStamp": data.timeStamp,
            "nonceStr": data.nonceStr,
            "package": data['package'],
            "signType": data.signType,
            "paySign": data.paySign,
            success:(res) => {},
            fail: (res) => {
              console.log('付款码唤起失败:', res)
              wx.showToast({
                title: '付款码唤起失败:' + res.errMsg,
                icon: 'none',
                duration: 2000,
              })
            },
          })
        }, err => {
          wx.hideLoading()
          err.msg && wx.showModal({
            title: '提示',
            content: err.msg,
            showCancel: false,
            success(res) {}
          })
        })


      }
    },
    onLoad() {
      this.getCode()
    },
  }
</script>

